<template>
  <div>
    <section class="category-single-content section-padding">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="category-tab tab-item">
              <ul>
                <li v-for="(item, index)  in categories" :key="item.code" @click="changeTab(index)"
                  :class="{active:tabIndex==index}">
                  {{ item.message }}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-8">
            <div class="main-content">
              
              <div class="single-content" v-for="(tab, index)  in categories" :key="index" v-show="tabIndex==index">
                <div class="single-job mb-3 d-lg-flex justify-content-between"
                  v-for="(item, index)  in articles[tabIndex]" :key="index">
                  <div class="job-text">
                    <h4>{{index}}{{ item.title }}</h4>
                    <ul class="mt-3">
                      <li class="mb-3">
                        <h5><i class="fa fa-pie-chart"></i> {{ item.id }}</h5>
                      </li>
                      <li>
                        <h5><i class="fa fa-clock-o"></i> {{ item.updateTime }}</h5>
                      </li>
                    </ul>
                  </div>
                  <div class="job-img align-self-center">
                    <img :src="'assets/images/cat'+(index%5+1)+'.png'" alt="job">
                  </div>
                </div>
              </div>

            </div>
            <div class="more-job-btn mt-5 text-center" v-show="seeFinish">
              <a @click="seeMore()" class="template-btn">查看更多</a>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="sidebar mt-5 mt-lg-0">
              <div class="single-item mb-4">
                <h4 class="mb-4">分类列表</h4>
                <a class="sidebar-btn d-flex justify-content-between mb-3" v-for="(item, index)  in categories"
                  :key="item.code" @click="changeTab(index)" :class="{active:tabIndex==index}">
                  <span> {{ item.code }}</span>
                  <span class="text-right"> {{ item.message }}</span>
                </a>
                <a href="#" class="sidebar-btn d-flex justify-content-between mb-3">
                  <span>3</span>
                  <span class="text-right">回到顶部</span>
                </a>
              </div>
              <div class="single-item mb-4">
                <h4 class="mb-4">分类列表</h4>
                <a class="sidebar-btn d-flex justify-content-between mb-3" v-for="(item, index)  in categories"
                  :key="item.code" @click="changeTab(index)" :class="{active:tabIndex==index}">
                  <span> {{ item.code }}</span>
                  <span class="text-right"> {{ item.message }}</span>
                </a>
                <a href="#" class="sidebar-btn d-flex justify-content-between mb-3">
                  <span>3</span>
                  <span class="text-right">回到顶部</span>
                </a>
              </div>
              <div class="single-item">
                <h4 class="mb-4">右侧列表结束</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

  </div>
</template>

<script>
  import {
    getRequest,
    serchArticlePageData
  } from '../api/Article.js'

  export default {
    data() {
      return {
        categories: [], // 文章分类数组
        tabIndex: 0, // 页签下标
        articles: [], // 按照分类个数形成标签
        pageIndex: [],
        pagesize: 5,

        pageSearch: {
          categoryCode: '',
          releaseMonth: '',
          keyWord: '',
          searchType: '1'
        },

        seeFinish: true
      }
    },
    mounted() {
      var _this = this
      getRequest('/manage/web/findArticleCategory')
        .then(function(response) {
          // 初始化分类
          _this.categories = response.data.data

          // 初始化每个分类独自的分页信息和文章列表数目
          for (let i in _this.categories) {
            let pageObj = {
              total: 0,
              currentPage: 1
            }
            _this.pageIndex.push(pageObj);
            let article = []
            _this.articles.push(article);
          }
          // 初始化第一个tab标签页的数据
          _this.searchDataByCategory(_this.tabIndex);

        })
        .catch(function(error) {
          console.log(error);
        });
    },
    methods: {
      /** 切换标签页
       * @param {Object} index
       */
      changeTab(index) {
        if (this.tabIndex != index) {
          this.tabIndex = index

          // 没有初始化数据时请求一次
          if (this.pageIndex[this.tabIndex].total == 0) {
            this.seeFinish = true;
            this.searchDataByCategory(this.tabIndex)
          } else if (this.articles[this.tabIndex].length < this.pageIndex[this.tabIndex].total) {
            this.seeFinish = true;
          }
        }
      },
      seeMore() {
        // 如果当前标签页的数据小于当前分类的总数量则继续执行查找
        if (this.articles[this.tabIndex].length < this.pageIndex[this.tabIndex].total) {
          this.searchDataByCategory(this.tabIndex);
        }
      },

      searchDataByCategory: function(index) {
        var _this = this
        let currentPage = _this.pageIndex[index].currentPage;
        _this.pageSearch.categoryCode = _this.categories[index].code
        serchArticlePageData(currentPage, _this.pagesize, _this.pageSearch).then(function(response) {
            if (response.status == 200 && response.data.code == 200) {
              _this.pageIndex[index].currentPage++;
              _this.pageIndex[index].total = response.data.data.total
              for (let i in response.data.data.rows) {
                _this.articles[index].push(response.data.data.rows[i]);
              }
            }
            if (_this.articles[index].length >= _this.pageIndex[index].total) {
              _this.seeFinish = false;
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      },

    }

  }
</script>
